// <script setup>
// import Versions from './components/Versions.vue'

// const ipcHandle = () => window.electron.ipcRenderer.send('ping')
// </script>

// <template>
//   <img alt="logo" class="logo" src="./assets/electron.svg" />
//   <div class="creator">Powered by electron-vite</div>
//   <div class="text">
//     Build an Electron app with
//     <span class="vue">Vue</span>
//   </div>
//   <p class="tip">Please try pressing <code>F12</code> to open the devTool</p>
//   <div class="actions">
//     <div class="action">
//       <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">Documentation</a>
//     </div>
//     <div class="action">
//       <a target="_blank" rel="noreferrer" @click="ipcHandle">Send IPC</a>
//     </div>
//   </div>
//   <Versions />
// </template>
<template>
  <div>
    <h1>Electron App Update</h1>
    
    <!-- 显示进度条 -->
    <progress :value="downloadProgress.percent" max="100"></progress>
    <p>{{ downloadProgress.percent.toFixed(2) }}% downloaded</p>
    
    <!-- 显示错误信息 -->
    <p v-if="errorMessage" style="color: red">{{ errorMessage }}</p>
    
    <!-- 显示更新已完成信息 -->
    <p v-if="updateDownloaded">Update downloaded! You can now install it.</p>
    
    <!-- 更新按钮 -->
    <button @click="checkForUpdates">Check for Updates</button>
  </div>
</template>

<script>
import { ipcRenderer } from 'electron';

export default {
  data() {
    return {
      downloadProgress: {
        percent: 0,
        transferred: 0,
        total: 0,
      },
      updateDownloaded: false,
      errorMessage: null,
    };
  },
  mounted() {
    // 监听主进程发送的下载进度
    ipcRenderer.on('update-download-progress', (event, { percent, transferred, total }) => {
      this.downloadProgress = { percent, transferred, total };
    });

    // 监听更新已下载
    ipcRenderer.on('update-downloaded', () => {
      this.updateDownloaded = true;
    });

    // 监听更新错误
    ipcRenderer.on('update-error', (event, errorMessage) => {
      this.errorMessage = errorMessage;
    });
  },
  methods: {
    // 向主进程请求检查更新
    checkForUpdates() {
      ipcRenderer.invoke('check-for-updates');
    },
  },
};
</script>

<style scoped>
progress {
  width: 100%;
  height: 20px;
}
button {
  margin-top: 20px;
}
</style>
